<template>
  <view class="defineSchduleRecord-box">
    <HeaderNavTabarVue :iconFont="'icon-shanchu'" title="会议详情" @rightIcon="rightIcon" />
    <view class="defineSchduleRecord-box-content">
      <h2>{{ defineSchduleList.reason }}</h2>
      <view class="time">
        {{ dayjs(defineSchduleList.startTime).format('MM-DD') }}
        周{{ weekDays[dayjs(defineSchduleList.startTime).day()] }}
        {{ dayjs(defineSchduleList.startTime).format('HH:mm') }}
        -
        {{ dayjs(defineSchduleList.endTime).format('HH:mm') }}
      </view>

      <view class="picker-content">
        <view class="measurement-info-list">
          <text class="info-list-left">组织人</text>
          <view class="info-list-right">
            <view class="info-content">
                <text>{{ defineSchduleList.nickName }}</text>
              <i class="iconfont icon-youjiantou"></i>
            </view>
          </view>
        </view>
      </view>

      <view class="list-info">
        <view class="picker-content" @tap="goDefineParticipants(defineSchduleList.participants)">
          <view class="measurement-info-list">
            <text class="info-list-left">参与人</text>
            <view class="info-list-right">
              <view class="uni-input">
                <text
                  v-for="(item, index) in JSON.parse(defineSchduleList.participants)"
                  :key="item.userId"
                  v-show="index < 4"
                  style="color: #165dff"
                  >{{ item.nickName }}{{ ' ' }}
                </text>
                <text v-show="defineSchduleList.participants.length > 4">
                  等{{ JSON.parse(defineSchduleList.participants).length }}人
                </text>
              </view>
              <i class="iconfont icon-youjiantou"></i>
            </view>
          </view>
        </view>
      </view>
      <view class="list-info">
        <view class="picker-content">
          <view class="measurement-info-list">
            <text class="info-list-left">描述</text>
            <view class="info-list-right">
              <view class="uni-input">
                <text>
                  {{ defineSchduleList.describe }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import dayjs from 'dayjs'
import { removeScheduleRecord } from '@/api/schedule'
const weekDays = ['日', '一', '二', '三', '四', '五', '六']

const defineSchduleList = ref(null)
const rightIcon =  () => {
  uni.showModal({
    title: '提示',
    content: '您确定要删除这条会议信息吗',
    success:  async (res) =>{
      if (res.confirm) {
        let params = {
          recordId:defineSchduleList.value.recordId
        }
      let {code,msg} =await  removeScheduleRecord(params)
        if(code === 200){
          uni.showToast({
            title:msg
          })
          setTimeout(()=>{
           uni.navigateBack()
          },500)
        }
      }
    },
  })
}
const goDefineParticipants = (props)=>{
  uni.navigateTo({
    url:'/pages/schedule/components/defineParticipants?item='+encodeURIComponent(props)
  })
}
onLoad((v) => {
  defineSchduleList.value = JSON.parse(decodeURIComponent(v.item))
})
</script>

<style scoped lang="scss">
@import '/static/style/index.scss';

.defineSchduleRecord-box {
  .defineSchduleRecord-box-content {
    margin-top: 40rpx;
    h2{
      font-weight: 500;
      padding-left: $spacing-row-base;
      background-color: #fff;
  padding-top: $spacing-row-base;
    }
    .time{
      font-weight: 500;
      padding-left: $spacing-row-base;
      padding-top: $spacing-row-base;
      background-color: #fff;
      padding-bottom: $spacing-row-base;


    }
    .measurement-info-list {
      margin-top: $spacing-row-base;
      background-color: #fff;
      @include flex($align: center, $justify: space-between);
      padding: $spacing-row-base;

      .info-list-left {
        // @include font-color-auxiliary;
        color: $uni-fc-fu-lin;
        font-size: $font-size-base;
      }

      .info-list-right {
        @include flex($align: center);

        .info-content {
          @include textStyleBase;
          font-size: 34rpx;
        }

        .iconfont {
          margin-left: 16rpx;
          // @include font-color-auxiliary;
          color: $uni-fc-fu-lin;
        }
      }

      .unit {
        // @include font-color-auxiliary;
        color: $uni-fc-fu-lin;
      }
    }
  }
}
</style>
